<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px">

            <el-form-item v-for="item in formParamList" :label="item.name" :key="item.id">
            	<div v-if="item.type == 'text'">
	                <el-input v-model="form[item.param]"></el-input>
            	</div>
            	<div v-else-if="item.type == 'select'">
            		<el-select placeholder="请选择内容" v-model="form[item.param]">
	                    <el-option v-for="item2 in dealJson(item.value)" :label="item2.label" :value="item2.value" :key="item2.value"></el-option>
	                </el-select>
            	</div>

            	<div v-else-if="item.type=='radio' ">
            		<el-radio-group v-model="form[item.param]">
					    <el-radio v-for="item3 in dealJson(item.value)" :label="item3.value" :key="item3.value">{{item3.label}}</el-radio>
					  </el-radio-group>
            	</div>

            	<div v-else-if="item.type=='checkbox' ">
            		<el-checkbox-group v-model="form[item.param]">
					    <el-checkbox v-for="item4 in dealJson(item.value)" :label="item4.value" :key="item4.value">{{item4.label}}</el-checkbox>
					  </el-checkbox-group>
            	</div>

            	<div v-else-if="item.type=='file'">
            		<el-upload class="upload-demo" :action="fileUploadAction" :data="{param:item.param}" :on-success="fileUploadSuccess" :on-remove="fileRemove">
					  <el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
            	</div>

            	<div v-else-if="item.type =='image'">
            		<el-upload :action="fileUploadAction" list-type="picture-card" :data="{param:item.param}" :on-success="imageUploadSuccess" :on-remove="imageRemove">
  						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog v-model="imageDialog" size="tiny">
  						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
            	</div>
                
            </el-form-item>

			<el-form-item>
                <div class="btSubmitAddNews">
                    <el-button type="primary" @click="consoleForm">提交</el-button>
                </div>
            </el-form-item>
        </el-form>

	</div>
</template>

<script>
import _param from '../common/param.vue'
import _http from '../common/http.vue'
	export default{
		data(){
			return {
				imageDialog:false,
				dialogImageUrl:'',
            	fileUploadAction:_param.param.fileUploadUrl,
				fileList:{},//文件列表
				fileUidList:{},//删除文件时需要
				imageFileList:{},
				imageUidList:{},
				formParamList:[],
				form:{},
				formId:1
			}
		},
		created(){
			this.getExpertFormList()
		},
		methods:{
			fileUploadSuccess(res,file,fileList){
				if (!this.fileList[res.param]) {
					this.fileList[res.param] = {}
				}
				this.fileList[res.param][file.uid] = {
					name:file.name,
					url:res.url
				}
				this.fileUidList[file.uid] = res.param
			},
			fileRemove(file,file_list){
				if (this.fileUidList[file.uid]) {
					delete this.fileList[this.fileUidList[file.uid]][file.uid]
				}
			},
			imageUploadSuccess(res,file,fileList){
				if (!this.imageFileList[res.param]) {
					this.imageFileList[res.param] = {}
				}
				this.imageFileList[res.param][file.uid] = {
					name:file.name,
					url:res.url
				}
				this.imageUidList[file.uid] = res.param
			},
			imageRemove(file,file_list){
				if (this.imageUidList[file.uid]) {
					delete this.imageFileList[this.imageUidList[file.uid]][file.uid]
				}
			},
			getExpertFormList(){
	    		_http.axiosRequest(this,'formParamList',{formId:this.formId},(res)=>{
	    			if (res.data) {
	    				this.formParamList = res.data
						var a = this.formParamList
						var b = {}
						for (var i = 0; i < a.length; i++) {
							//复选框是数组
							if (a[i]['type'] == 'checkbox' || a[i]['type'] == 'file' || a[i]['type'] == 'image') {
								b[a[i]['param']]=[]
							}else{
								b[a[i]['param']]=''
							}
						}
						this.form = b
	    			}

	    		})
			},
			dealJson(item){
				return JSON.parse(item)
			},
			consoleForm(){
				for(let i in this.fileList){
					this.form[i]=[]
					for(let j in this.fileList[i]){
						this.form[i].push(this.fileList[i][j])
					}
				}

				for(let i in this.imageFileList){
					this.form[i]=[]
					for(let j in this.imageFileList[i]){
						this.form[i].push(this.imageFileList[i][j])
					}
				}

	    		_http.axiosRequest(this,'addFormValue',{formId:this.formId,form:this.form},(res)=>{
	    			if (_http.apiResult(this,res.data)) {
	    				console.log(res)
	    			}

	    		})
			}
		}
	}
</script>